---
title: Blockquote
description: "`Blockquote` is a component that represents a quotation. By default, it renders a `blockquote` element."
storybook: components-blockquote--basic
source: components/blockquote
style: components/blockquote/blockquote.style.ts
---

```tsx preview
<Blockquote.Root citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール">
  地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
</Blockquote.Root>
```

## Usage

:::code-group

```tsx [package]
import { Blockquote } from "@yamada-ui/react"
```

```tsx [alias]
import { Blockquote } from "@/components/ui"
```

```tsx [monorepo]
import { Blockquote } from "@workspaces/ui"
```

:::

```tsx
<Blockquote.Root>
  <Blockquote.Content />
  <Blockquote.Caption>
    <Blockquote.Cite />
  </Blockquote.Caption>
</Blockquote.Root>
```

### Change Variant

```tsx preview
<VStack>
  <For
    each={[
      {
        variant: "solid",
      },
      {
        variant: "subtle",
      },
      {
        variant: "plain",
      },
    ]}
  >
    {({ variant }, index) => (
      <Blockquote.Root
        key={index}
        variant={variant}
        citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール"
      >
        地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
      </Blockquote.Root>
    )}
  </For>
</VStack>
```

### Display Citation

To display the source of the quote, set to `cite`.

```tsx preview
<VStack>
  <Blockquote.Root
    cite="Wikipedia"
    citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール"
  >
    地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
  </Blockquote.Root>

  <Blockquote.Root
    cite="Wikipedia"
    citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール"
    withDash
  >
    地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
  </Blockquote.Root>
</VStack>
```

### Display Icon

To display an icon, set a `ReactNode` to `icon`.

```tsx preview
<Blockquote.Root
  variant="plain"
  cite="Wikipedia"
  citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール"
  icon={<Blockquote.Icon />}
>
  地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
</Blockquote.Root>
```

### Change Alignment

To change the alignment, set `justify` to `"start"`, `"center"`, or `"end"`. The default is `"start"`.

```tsx preview
<VStack>
  <For each={["start", "center", "end"]}>
    {(justify, index) => (
      <Blockquote.Root
        key={index}
        cite="Wikipedia"
        citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール"
        justify={justify}
      >
        地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
      </Blockquote.Root>
    )}
  </For>
</VStack>
```

### Customize

```tsx preview
<VStack>
  <Blockquote.Root
    cite="Wikipedia"
    citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール"
    captionProps={{
      alignSelf: "center",
    }}
  >
    地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
  </Blockquote.Root>

  <Blockquote.Root citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール">
    <Blockquote.Content>
      地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
    </Blockquote.Content>

    <Blockquote.Caption alignSelf="end">
      <Blockquote.Cite>Wikipedia</Blockquote.Cite>
    </Blockquote.Caption>
  </Blockquote.Root>
</VStack>
```

```tsx preview
<VStack>
  <Blockquote.Root
    cite="Wikipedia"
    citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール"
    citeProps={{
      color: "link",
    }}
  >
    地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
  </Blockquote.Root>

  <Blockquote.Root citeUrl="https://ja.wikipedia.org/wiki/ドラゴンボール">
    <Blockquote.Content>
      地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
    </Blockquote.Content>

    <Blockquote.Caption>
      <Blockquote.Cite color="secondary">Wikipedia</Blockquote.Cite>
    </Blockquote.Caption>
  </Blockquote.Root>
</VStack>
```

## Props

<PropsTable name="blockquote" />
